<template>
  <dv-full-screen-container class="full_container">
    <div v-if="showLoading" class="showLoading">
      <dv-loading>Loading...</dv-loading>
    </div>
    <div v-else>
      <!-- 头部图片 -->
      <div class="title_img header_img">
        <img src="../../../static/images/warehouse-title.png" />
      </div>

      <div class="app_main">
        <!-- 按钮list -->
        <div class="btn_list">
           <button class="btn" :class="activeBtn==='week'?'activeBtn':''" @click="activeBnt('week')" @touchstart.stop.prevent="touchstartAction('week')">本周</button>
           <button class="btn" :class="activeBtn==='today'?'activeBtn':''" @click="activeBnt('today')" @touchstart.stop.prevent="touchstartAction('today')">当日</button>
           <button class="btn" :class="activeBtn==='month'?'activeBtn':''" @click="activeBnt('month')" @touchstart.stop.prevent="touchstartAction('month')">本月</button>
        </div>

        <!-- flex 布局 -->
        <div class="flex_box">
            <div class="flex4">
                <goods :product_list="product_list"></goods>
            </div>
            <div class="flex1">
               <warehouse :warehouse_data="warehouse_data" :nowWarehouse="nowWarehouse" @queryWarehouse="queryWarehouse"></warehouse>
            </div>
            <dv-border-box-10 class="flex2">
              <scrollBoard :warehouse_data="warehouse_data" :nowWarehouse="nowWarehouse"></scrollBoard>
            </dv-border-box-10>
        </div>

      </div>
    </div>
  </dv-full-screen-container>
</template>

<script>
import scrollBoard from './components/scroll_board'
import warehouse from './components/warehouse'
import goods from './components/goods'
// import untils from '@/untils/index'
import WsClient from 'lola-ws-client'
export default {
  components: {scrollBoard, warehouse, goods},
  name: 'Warehouse',
  data () {
    return {
      showLoading: true,
      activeBtn: 'week',
      product_list: [],
      warehouse_data: [],
      nowWarehouse: 0, // 默认当前仓库键0
      sockect: null
    }
  },
  created () {
    this.sockect = new WsClient(this.$config.warehouse_ws, (rsp) => {
      console.log('message')
    }, () => {
      console.log('ws connected')
    })
    this.initWs()

    //  定时器
    setInterval(() => {
      if (this.nowWarehouse < this.warehouse_data.length - 1) {
        this.nowWarehouse++
      } else if (this.nowWarehouse === this.warehouse_data.length - 1) {
        this.nowWarehouse = 0
      }
    }, 5000)
  },
  methods: {
    // 监听子组件选择仓库
    queryWarehouse (val) {
      console.log(val)
      this.nowWarehouse = val
    },
    touchstartAction (val) {
      console.log('监听到触摸屏幕触摸点击开始事件')
      this.activeBtn = val
      this.sendQueryProduct()
      this.sendQueryStore()
    },
    activeBnt (val) {
      this.activeBtn = val
      this.sendQueryProduct()
      this.sendQueryStore()
    },
    initWs () {
      const that = this
      this.sockect.onOpen = () => {
        // 注入行情推送结果处理器
        that.sockect.addListner(that.$config.wsDirect.LOGIN, (res) => {
          console.log(res)
        })
        that.sockect.addListner(that.$config.wsDirect.QUERY_WAREHOUSE_PRODUCT_STATISTICS, that.dealQueryProduce)
        that.sockect.addListner(that.$config.wsDirect.QUERY_WAREHOUSE_STORE_PRODUCT_STATISTICS, that.dealQueryStore)
        that.sockect.addListner(that.$config.wsDirect.PUSH_WAREHOUSE_SOTRE_PRODUCT, that.dealpushStore)
        that.sockect.addListner(that.$config.wsDirect.PUSH_RELOAD, (res) => {
          console.log('监听到页面刷新指令,即将刷新页面===============')
          console.log(res)
          setTimeout(() => {
            window.location.reload()
          }, 1500)
        })
        that.login()
      }
      this.sockect.onMessage = (r) => {
        console.log(r)
      }
      this.sockect.onClose = (res) => {
        console.log('断开重连中 wait.........')
        this.initWs()
      }
      this.sockect.init()
    },
    login () {
      console.log('===尝试发送ws登录===START===')
      const that = this
      that.sockect.send(that.$config.wsDirect.LOGIN, { userName: '1', password: '', verifyCode: '' }, function (rep) {
        if (rep.code === 200) {
          console.log('===发送登录成功===')
          that.sendQueryProduct()
          that.sendQueryStore()
          that.subscriber() // 发送订阅请求
        } else {
          // console.log('===发送失败===')
        }
      })
      console.log('===尝试发送ws登录===END===')
    },
    subscriber () {
      console.log('===尝试发送订阅请求===START===')
      const that = this
      that.sockect.send(that.$config.wsDirect.PUSH_REQUEST, null, function (rep) {
        if (rep.code === 200) {
          // console.log('===发送成功===')

        } else {
          // console.log('===发送失败===')
        }
      })
      console.log('===尝试发送订阅请求===END===')
    },
    sendQueryProduct () {
      console.log('===尝试发送货品类目请求===START===')
      const that = this
      that.sockect.send(that.$config.wsDirect.QUERY_WAREHOUSE_PRODUCT_STATISTICS, {timeType: that.activeBtn}, function (rep) {
        if (rep.code === 200) {
          // console.log('===发送成功===')

        } else {
          // console.log('===发送失败===')
        }
      })
      console.log('===尝试发送货品类目请求===END===')
    },
    sendQueryStore () {
      console.log('===尝试发送仓库货品统计请求===START===')
      const that = this
      that.sockect.send(that.$config.wsDirect.QUERY_WAREHOUSE_STORE_PRODUCT_STATISTICS, {timeType: that.activeBtn}, function (rep) {
        if (rep.code === 200) {
          // console.log('===发送成功===')

        } else {
          // console.log('===发送失败===')
        }
      })
      console.log('===尝试发送仓库货品统计请求===END===')
    },
    dealQueryProduce (val) {
      console.log('监听到发送货品类目响应------')
      console.log(val)
      if (val.body.code === 200) {
        this.product_list = val.body.data
        this.product_list.map((val, index) => {
          val.orderWeight = val.orderWeight
          val.orderSales = val.orderSales
        })
      }
    },
    dealQueryStore (val) {
      console.log('监听到发送仓库统计响应------')
      console.log(val)
      if (val.body.code === 200) {
        this.warehouse_data = val.body.data
        setTimeout(() => {
          this.showLoading = false
        }, 1500)
      }
    },
    dealpushStore (val) {
      console.log('监听到推送仓储 仓库货品记录=================')
      console.log(val)
      this.sendQueryProduct()
      this.sendQueryStore()
    }

  }
}
</script>

<style scoped>

.showLoading {
  margin: 20% auto;
  color: white;
}
.full_container {
  width: 100%;
  height: 100%;
  background: url("../../../static/images/background.png");
  overflow: hidden;
}
.title_img {
  width: 80%;
  height: 15%;
  margin: 0 auto;
}
.title_img img {
  width: 100%;
}
.app_main {
  height: 85%;
  width: 95%;
  margin: 0 auto;
}

/* 按钮list */
.btn_list {
  margin-top: 5px;
  text-align: center;
}
.btn {
  width: 50px;
  background: rgba(13, 27, 109, 1);
  color: white;
  border: none;
  padding: 5px 10px;
}
.btn::after {
  border: none;
}
.activeBtn {
  background: #2a2aedff;
}

/* 弹性布局 */
.flex_box {
  display: flex;
  /* flex-direction: row;
  flex-wrap: nowrap; */
  justify-content: space-between;
  margin-top: 10px;
  height: 80vh;
  overflow: hidden;
  width: 100%;
}
.flex1 {
  height: 80vh;
  /* overflow: hidden; */
  flex: 1;
  /* background: white; */
  margin: 0 20px;
}
.flex2 {
  height: 80vh;
  overflow: hidden;
  flex: 3;
  background: rgba(6, 7, 107, 0.59);
}
.flex4 {
  height: 80vh;
  overflow: hidden;
  flex: 6;
  /* background: rgba(6, 7, 107, 0.59); */
}

</style>
